<template>
	<view>
		<!-- 显示本周日期和星期的容器 -->
		<view>
			<view :border="true">
				<view class="week">
					<!-- 循环生成一周的日期 -->
					<view class="day" v-for="(date, index) in weekDates" :key="index" @click="selectDate(date)"
						:class="['day-item', date === selectedDate ? 'is-selected' : '']">
						<!-- 显示星期几 -->
						<view class="day-name">{{ getDayName(date) }}
						</view>
						<!-- 只显示日期 -->
						<view class="day-date">
							{{ formatDate(date) }}
						</view>
						<!-- 根据预约状态显示圆点 -->
						<view :class="getDotClass(date) ? getDotClass(date) : ''"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 当选择了日期时显示预约信息 -->
		<view class="appointment-info">
			<!-- 当选择了日期时显示预约信息 -->
			<view>
				<view class="title">预约信息:</view>
				<view class="data-list">
					<!-- 循环显示预约信息列表 -->
					<view class="data-item" v-for="(item, index) in filteredDataList" :key="index">
						<view class="data-content">
							<view class="data-label flex" :class="item.fontColorClass">
								<image src="/static/icon/时间 (3).png" @tap="handleImageTap" class="image-style"></image>
								<text>预约时间：{{ item.dateTime }}</text>
							</view>
							<view class="data-label flex" :class="item.fontColorClass">
								<image src="/static/icon/戒指 (1).png" @tap="handleImageTap" class="image-style"></image>
								<text>预约作品：{{ item.imgType }}</text>
							</view>
							<view class="data-label flex" :class="item.fontColorClass">
								<image src="/static/icon/姓名.png" @tap="handleImageTap" class="image-style"></image>
								<text class="name-text">姓名：</text>
								<text style="margin-left: -22rpx;">{{ item.userName }}</text>
							</view>
						<!-- 	<view class="data-label flex" :class="item.fontColorClass">
								<image src="/static/icon/电话.png" @tap="handleImageTap" class="image-style"></image>
								<text>联系电话：{{ item.phone }}</text>
							</view> -->
						</view>
						<view class="container">
							<view class="more-action" @tap="showActionMenu(item)">
								<text class="more-text">更多</text>
							</view>
						</view>
					</view>
					<!-- 没有预约信息时显示空状态组件 -->
					<view>
						<view class="empty" v-if="filteredDataList.length === 0">
							<view class="empty-content">
								<image src="/static/icon/搜索为空.png" class="image-empty"></image>
								<text class="empty-text">预约信息为空</text>
							</view>
						</view>
					</view>
				</view> 
				<!-- 添加按钮，如果是商家则隐藏 -->
				<image v-if="isLogin"  src="/static/icon/添加 (1).png" class="add-button" @click="handleAddClick" 
					mode="aspectFit"></image>
				<button v-else  src="/static/icon/添加 (1).png" class="add-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					mode="aspectFit"></button>
					 
				<!-- 模态框 -->
				<view class="modal" v-if="showModal" @click="hideModal">
					<view class="modal-content" @click.stop>
						<view class="modal-header">
							<text>预约信息</text>
						</view>
						<view class="modal-body">
							<!-- 时间选择器 -->
							<picker mode="time" :start="businessStartTime" :end="businessEndTime" @change="onTimeChange"
								class="picker-parent">
								<view class="picker-item">
									<text class="required">*</text>
									<text class="time">选择时间：</text>{{ timeValue || '请选择时间' }}
								</view>
							</picker>
							<!-- 作品选择器 -->
							<picker mode="selector" @change="onWorkChange" class="picker-parent" :range="workOptions">
								<view class="picker-item">
									<text class="required">*</text>
									<text>选择作品：</text>
									<text
										:class="{ 'default-work-prompt': selectedWork === '请选择作品' }">{{ selectedWork }}</text>
								</view>
							</picker>
							<view class="name-input-group">
								<view class="name">姓名：</view>
								<input type="text" v-model="name" placeholder="请输入姓名" class="input-item-name"
									placeholder-style="color:#999; font-size:24rpx;" />
							</view>
						<!-- 	<view class="phone-input-group">
								<view class="phone">联系电话：</view>
								<input type="text" v-model="phone" placeholder="请输入手机号" class="input-item"
									placeholder-style="color:#999; font-size:24rpx;" />
							</view> -->
						</view>
						<view class="modal-footer">
							<!-- 预约按钮 -->
							<button class="confirm-button" @click="confirmReservation">预约</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <tab-bar :current="3"></tab-bar> -->
		<!-- 弹出框 -->
		<view>
			<u-popup :show="show" mode="bottom" @close="close">
				<view class="LoginAlert">
					<p class="AlertText">你未登录，请先登录</p>
					<view class="AlertButton">
						<u-button type="success" text="登录" @click="getEquipment()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import request from '@/util/request'
	export default {
		data() {
			return {
				actionMenuVisible: false, // 控制操作菜单的显示
				name: '手作大师', // 用户姓名，初始为空
				phone: '',
				// 作品名称到数字的映射
				workMap: {
					'银饰': 0,
					'皮具': 1,
					'玻璃': 2,
					'团建': 3
				},
				selectedItemId: null,
				// 是否显示模态框
				showModal: false,
				// 选择的时间，初始值为提示信息
				// timeValue: '请选择时间',
				// 选择的作品，初始值为提示信息
				selectedWork: '银饰',
				// 作品选项列表
				workOptions: ['银饰', '皮具', '玻璃', '团建'],
				// 存储所有预约信息
				dataList: [],
				// 选中的日期
				selectedDate: '',
				// 一周的日期列表
				weekDates: [],
				// 星期几的名称列表
				weekDays: ["日", "一", "二", "三", "四", "五", "六"],
				// 当前的最大 id
				maxId: 0,
				// 存储预约的状态
				appointmentStatus: {},
				workMapReverse: {
					0: '银饰',
					1: '皮具',
					2: '玻璃',
					3: '创意手作'
				},
				currentNickName: '', // 当前登录的昵称
				isMerchant: false, // 是否是商家
				deviceId: null,
				aboutInfo: {},
				isLogin: false, // 是否登录
				show: false, // 是否显示弹出框
				isMerchantPhone: '',
				merchantPhone: '',
				// 选择的时间，初始值为提示信息
				businessStartTime: '00:00', // 默认开始时间
				businessEndTime: '23:59', // 默认结束时间
				timeValue: '', // 时间选择器的绑定值
			};
		},
		computed: {
			filteredDataList() {
				return this.dataList.filter(item => {
					if (!item.dateTime) return false;
					return this.selectedDate && item.dateTime.startsWith(this.selectedDate);
				}).map(item => {
					return {
						...item,
						// 根据 selectedItemId 判断是否为选中状态，设置字体颜色类名
						fontColorClass: item.id === this.selectedItemId ? 'selected-font-color' : ''
					};
				});
			},
		},
		onShow: function() {
			// 每次页面显示时重新加载数据
			//this.getPhone()
			this.checkLoginStatus()
		},
		onLoad() {
			// this.getPhone()
			// 在组件创建时生成一周的日期列表
			//this.checkLoginStatus();
			this.generateWeekDates();
			this.getDeviceInfo();
			this.getBusinessHours();
			this.fetchAppointments()
			// 设置默认时间为当前时间
			// const now = new Date();
			// const currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
			// this.timeValue = currentTime;
			// 获取用户信息，并根据昵称判断是否为商家
			this.getUserInfo().then(userInfo => {
				const today = new Date();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				this.selectedDate = `${month}-${day}`;
				// 设置默认时间为当前时间
				this.timeValue =
					`${String(today.getHours()).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}`;
				// 判断是否为特定的商家账号
				// this.isMerchant = this.currentNickName === 'diascing_44';
				// this.isMerchant = this.deviceId === '17310330351222778915';
				// 可选：设置name属性为当前昵称
			});
		},
		methods: {
			getPhoneNumber(event) {
					// 判断用户是否授权成功
					if (event.detail.errMsg === 'getPhoneNumber:ok') {
						const encryptedData = event.detail.encryptedData;
						const iv = event.detail.iv;
						uni.login({
							provider: 'weixin',
							success: (res) => {
								if (res.code) {
									this.getUserPhoneNumber(res.code,encryptedData,iv);
								}
							},
							fail: (err) => {
								console.error('微信登录失败', err);
							}
						});
					}
			},
			// 调用后端接口解密手机号数据
			getUserPhoneNumber(code,encryptedData, iv) {
				this.$myRequest({
					url: '/app/wxLogin', // 你的后端解密接口
					method: 'get',
					data: {
						code:code,
						encryptedData: encryptedData,
						iv: iv
					},
				}).then(res =>{
					uni.setStorageSync('token',res.token)
					uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
					uni.setStorage({
						key: 'isLogin',
						data: true
					})
					this.showModal = true
					this.$myRequest({
						url: '/app/userInfo', // 你的后端解密接口
						method: 'get'
					}).then(res =>{
						uni.setStorageSync("appUser",res.appUser)
						this.name = res.appUser.nickName
						this.phone =  res.appUser.mobile
					})
				})
			},
			getBusinessHours() {
				request({
					url: `/setting/setting/queryTime`,
					method: 'GET',
				}).then(res => {
					// 检查返回的数据是否有效
					if (res && res.data) {
						const imgSetting = res.data;
						if (imgSetting) {
							this.businessStartTime = imgSetting.businessStartTime; // 设置开始时间
							this.businessEndTime = imgSetting.businessEndTime; // 设置结束时间
						}
					} else {}
				}).catch(err => {});
			},
			getUserPhone() {
				return new Promise((resolve, reject) => {
					if (this.isLogin) {
						request({
							url: '/users/getUserById',
							method: 'get',
							data: {
								userId: this.deviceId
							}
						}).then(res => {
							if (res && res.data && res.data.phone) {
								this.isMerchantPhone = res.data.phone;
								resolve(this.isMerchantPhone); // 成功获取电话号码后，通过 resolve 返回电话号码
							} else {
								reject(new Error('无法获取电话号码')); // 如果响应中没有电话号码，拒绝 Promise
							}
						}).catch(err => {
							reject(err); // 如果请求出错，拒绝 Promise
						});
					} else {
						reject(new Error('用户未登录')); // 如果用户未登录，拒绝 Promise
					}
				});
			},
			getDeviceInfo() {
				const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
				this.deviceId = systemInfo.deviceId; // 提取设备ID
				// 获取商家的电话
				this.getPhone();
			},
			checkLoginStatus() {
				// 检查登录状态，这里可以调用后端接口或检查本地存储
				this.isLogin = uni.getStorageSync('isLogin');
				if(!this.isLogin){
					uni.login({
						provider: 'weixin',
						success: (res) => {
								this.$myRequest({
									url: '/app/checkLogin', // 你的后端解密接口
									method: 'get',
									data: {
										code:res.code
									},
								}).then(res =>{
									console.log(res)
									if(res.token){
										this.isLogin = true
										uni.setStorageSync('token',res.token)
										uni.setStorage({
											key: 'isLogin',
											data: true
										})
										this.getLoginUserInfo();
									}
								})
						},
						fail: (err) => {
							console.error('微信登录失败', err);
						}
					});
				}else{
					const appuser = uni.getStorageSync("appUser")
					this.name = appuser.nickName
					this.phone = appuser.mobile
				}
			},
			getLoginUserInfo(){
				this.$myRequest({
					url: '/app/userInfo', // 你的后端解密接口
					method: 'get'
				}).then(res =>{
					uni.setStorageSync("appUser",res.appUser)
					this.name = res.appUser.nickName
					this.phone = res.appUser.mobile
				})	
			},
			handleAddClick() {
				 this.showModal = true;
			},
			// 跳转修改信息页面
			toPhone() {
				uni.navigateTo({
					url: "/pages/my/updateMy/index"
				});
			},
			close() {
				this.show = false;
			},
			getEquipment() {
				// 获取设备信息 
				const systemInfo = uni.getSystemInfoSync();
				// 提取设备号（唯一标识符） 
				const deviceId = systemInfo.deviceId;
				wx.getUserProfile({
					desc: '获取你的头像和昵称',
					success: (res) => {
						request({
							url: '/users/login',
							method: 'post',
							data: deviceId
						});
						uni.setStorage({
							key: 'isLogin',
							data: true
						})
						uni.setStorage({
							key: 'isUser',
							data: res.userInfo
						})
						uni.reLaunch({
							url: "/pages/booking/index"
						})
					},
				});
			},
			getUserInfo() {
				// 这里应该是调用后端接口获取用户信息
				// 模拟的用户信息获取
				return new Promise((resolve) => {
					const userInfo = uni.getStorageSync('isUser') || {
						nickName: '', // 这里应该是实际的用户昵称
						deviceId: '' // 确保这里包含了 deviceId
					};
					resolve(userInfo);
				});
			},
			fetchAppointments() {
				// 首先获取用户信息，确保 this.isMerchantPhone 有值
				this.getUserInfo().then(userInfo => {
					if (!this.isLogin) {
						return; // 如果未登录，则不执行查询
					}
					this.fetchUserAppointments(this.deviceId);
					// // 等待获取电话号码的 Promise
					// this.getUserPhone().then(phone => {
					// 	// 根据设备ID判断用户类型，并获取预约信息
					// 	if (this.isMerchantPhone === this.merchantPhone) {
					// 		this.fetchMerchantAppointments();
					// 	} else {
					// 		// 普通用户，调用获取个人预约信息的API
					// 		this.fetchUserAppointments(this.deviceId);
					// 	}
					// }).catch(error => {
					// 	// console.error('获取电话号码失败:', error);
					// });
				});
			},
			// 获取商家的预约信息
			fetchMerchantAppointments() {
				request({
					url: '/booking/booking/selectBookings',
					method: 'GET'
				}).then(res => {
					const appointments = res.data.map(appointment => {
						return {
							...appointment,
							// 将数字映射回作品名称
							imgType: this.workMapReverse[appointment.imgType]
						};
					});
					this.dataList = appointments;
				}).catch(err => {
					uni.showToast({
						title: '获取预约信息失败',
						icon: 'none',
						duration: 2000,
					});
				});
			},
			// 获取普通用户的预约信息
			fetchUserAppointments() {
				request({
					url: '/booking/booking/selectBookingsByUser?userId=' + this.deviceId,
					method: 'GET',
				}).then(res => {
					const appointments = res.data.map(appointment => {
						return {
							...appointment,
							// 将数字映射回作品名称
							imgType: this.workMapReverse[appointment.imgType]
						};
					});
					this.dataList = appointments;
				}).catch(err => {
					uni.showToast({
						title: '获取预约信息失败',
						icon: 'none',
						duration: 2000,
					});
				});
			},
			showActionMenu(item) {
				if (!item) {
					return;
				}
				// 设置当前选中的预约信息 ID
				this.selectedItemId = item.id;

				let itemList = [];

				// 无论是商家还是非商家，都会添加“拨打电话”选项
				itemList.push('拨打电话');

				// 如果不是商家，则添加“取消预约”选项
				if (!this.isMerchant) {
					itemList.push('取消预约');
				} else {
					// 如果是商家，则添加“完成订单”和“取消预约”选项
					itemList.unshift('完成订单'); // 将“完成订单”添加到数组的第一个位置
					itemList.push('取消预约'); // 将“取消预约”添加到数组的末尾
				}

				wx.showActionSheet({
					itemList: itemList,
					success: (res) => {
						const tapIndex = res.tapIndex;
						if (tapIndex === 0 && this.isMerchant) {
							// 如果是商家，第一个选项是“完成订单”
							this.completeOrder(item);
						} else if (tapIndex === 0 && !this.isMerchant) {
							// 如果不是商家，第一个选项是“拨打电话”
							this.callPhone(item);
						} else if (tapIndex === 1 && this.isMerchant) {
							// 如果是商家，第二个选项是“拨打电话”
							this.callPhone(item);
						} else if (tapIndex === 1 && !this.isMerchant) {
							// 如果不是商家，第二个选项是“取消预约”
							this.deleteAppointment(item);
						} else if (tapIndex === 2 && this.isMerchant) {
							// 如果是商家，第三个选项是“取消预约”
							this.deleteAppointment(item);
						}
					},
					fail: () => {
						// 取消选中预约信息
						this.selectedItemId = null;
					}
				});
			},
			completeOrder(appointment) {
				if (appointment && appointment.id !== undefined) {
					// 显示确认提示框
					let content; // 声明一个变量用于存储提示内容
					content = `您即将完成 ${appointment.userName} ${appointment.dateTime} 预约到店的订单，是否继续？`;
					wx.showModal({
						title: '提示',
						content: content, // 使用if语句确定的提示内容
						success: (res) => {
							if (res.confirm) {
								request({
									url: `/booking/booking/completeOrder?id=${appointment.id}`,
									method: 'PUT'
								}).then(res => {
									wx.showToast({
										title: '订单已完成',
										icon: 'none',
										duration: 2000,
									});
									this.fetchAppointments();
								}).catch(err => {
									wx.showToast({
										title: '订单完成失败',
										icon: 'none',
										duration: 2000,
									});
								});
							}
						}
					});
				}
			},
			getPhone() {
				//获取电话
				this.getUserPhone();
				request({
					url: '/about/query',
					method: 'GET',
				}).then(res => {
					this.aboutInfo = res;
					this.merchantPhone = this.aboutInfo.data.phone
					this.phone = this.isMerchantPhone
					this.isMerchant = this.isMerchantPhone === this.merchantPhone; //商家
					this.fetchAppointments();
				})
			},
			callPhone(appointment) {
				// 确保 appointment 对象中有电话号码的属性
				const phoneNumber = this.isMerchant ? appointment.phone : this.aboutInfo.data.phone;
				if (phoneNumber) {
					wx.makePhoneCall({
						phoneNumber: phoneNumber, // 需要拨打的电话号码
					});
				} else {
					wx.showToast({
						title: '没有可拨打的电话',
						icon: 'none'
					});
				}
			},
			contactMerchant(appointment) {
				if (this.isMerchant) {
					// 商家跳转到与用户单线联系的页面
					uni.switchTab({
						url: `/pages/share/index`
					});
				} else {
					// 用户跳转到联系客服页面
					uni.switchTab({
						url: '/pages/my/index'
					});
				}
			},
			deleteAppointment(appointment) {
				if (appointment && appointment.id !== undefined) {
					// 显示确认提示框
					let content; // 声明一个变量用于存储提示内容
					if (this.isMerchant) { // 判断是否是商家
						content = `您即将取消 ${appointment.userName} ${appointment.dateTime} 到店的预约，是否取消？`;
					} else {
						content = `您即将取消${appointment.dateTime}到店的预约，是否取消？`;
					}
					wx.showModal({
						title: '提示',
						content: content, // 使用if语句确定的提示内容
						success: (res) => {
							if (res.confirm) {
								request({
									url: `/booking/booking/updateBookingStatus?id=${appointment.id}`,
									method: 'PUT'
								}).then(res => {
									wx.showToast({
										title: '预约已取消',
										icon: 'none',
										duration: 2000,
									});
									this.fetchAppointments();
								}).catch(err => {
									wx.showToast({
										title: '预约取消失败',
										icon: 'none',
										duration: 2000,
									});
								});
							}
						}
					});
				}
			},
			onTimeChange(e) {
				this.timeValue = e.detail.value;
			},
			onWorkChange(e) {
				// 处理作品选择器的变化事件，根据选项列表更新选择的作品
				this.selectedWork = this.workOptions[e.detail.value];
			},
			confirmReservation() {
				// 校验必填项
				if (!this.timeValue || this.timeValue === '请选择时间') {
					uni.showToast({
						title: '请选择时间',
						icon: 'none',
					});
					return;
				}
				if (!this.selectedWork || this.selectedWork === '请选择作品') {
					uni.showToast({
						title: '请选择作品',
						icon: 'none',
					});
					return;
				}
				// 校验选填项（如果需要）
				if (this.name && !this.isValidName(this.name)) {
					uni.showToast({
						title: '请输入有效的姓名',
						icon: 'none',
					});
					return;
				}
				// if (this.phone && !this.isValidPhone(this.phone)) {
				// 	uni.showToast({
				// 		title: '请输入有效的手机号',
				// 		icon: 'none',
				// 	});
				// 	return;
				// }
				// 如果校验通过，执行预约逻辑
				this.addAppointment();
			},
			isValidName(name) {
				// 这里可以添加姓名的校验逻辑，例如非空
				return name.trim() !== '';
			},
			isValidPhone(phone) {
				// 这里可以添加手机号的校验逻辑，例如使用正则表达式校验
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phone);
			},
			addAppointment() {
				// 检查是否选择了时间和作品，如果未选择则提示并返回
				if (!this.timeValue || this.timeValue === '请选择时间') {
					wx.showToast({
						title: '请选择时间',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				if (!this.selectedWork || this.selectedWork === '请选择作品') {
					wx.showToast({
						title: '请选择作品',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				// // 检查是否填写了正确的手机号
				// if (!this.phone || !this.isValidPhone(this.phone)) {
				// 	wx.showToast({
				// 		title: '请填写正确的手机号',
				// 		icon: 'none',
				// 		duration: 2000,
				// 	});
				// 	return;
				// }
				// 使用映射关系更新 selectedWork 的值
				const workValue = this.workMap[this.selectedWork];
				if (typeof workValue === 'undefined') {
					wx.showToast({
						title: '作品选择有误',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				// 检查当天预约次数
				this.checkAppointmentCount(this.selectedDate).then(count => {
					if (count >= 3) {
						wx.showModal({
							title: '提示',
							content: '您当天预约已超过三次，是否继续预约？',
							success: res => {
								if (res.confirm) {
									this.saveBooking(workValue);
								} else {
									// 用户点击取消
								}
							}
						});
					} else {
						wx.showModal({
							title: '提示',
							content: `您即将预约${this.selectedDate} ${this.timeValue}到店，是否确认预约？`,
							success: res => {
								if (res.confirm) {
									this.saveBooking(workValue);
								} else {
									// 用户点击取消
								}
							}
						});
					}
				});
			},
			// 新增方法，用于检查当天的预约次数
			checkAppointmentCount(date) {
				let count = 0;
				// 假设this.dataList是所有预约数据的数组
				count = this.dataList.filter(item => item.dateTime.startsWith(date)).length;
				return Promise.resolve(count);
			},
			// 重置值的方法
			resetValues() {
				// 重置作品选择的值
				this.selectedWork = '请选择作品';
				// 获取当前时间并格式化为需要的格式
				const now = new Date();
				const currentTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString()
					.padStart(2, '0');
				// 更新timeValue为当前时间
				this.timeValue = currentTime;
				this.phone = this.isMerchantPhone
			},
			// 新增方法，用于保存预约信息
			saveBooking(workValue) {
				// 构建新的预约对象
				const newAppointment = {
					userId: this.deviceId,
					userName: this.name,
					phone: this.phone,
					dateTime: `${this.selectedDate} ${this.timeValue}`,
					imgType: workValue, // 发送到后端的作品值
					status: 0,
				};
				request({
					url: '/booking/booking/saveBooking',
					method: 'POST',
					data: newAppointment
				}).then(res => {
					// 将新创建的预约信息添加到列表中
					this.dataList.push(newAppointment);
					// 显示预约成功的提示信息
					wx.showToast({
						title: '预约成功',
						icon: 'success',
						duration: 3000,
						complete: () => {
							// 预约成功后，重置时间和作品选择的值
							this.resetValues();
						}
					});
					this.fetchAppointments();
					// 重置姓名和电话（如果需要）
					// this.name = '',
					this.showModal = false;
				}).catch(err => {
					// 后端返回错误信息
					wx.showToast({
						title: '预约失败', // 使用err.message获取错误信息
						icon: 'none',
						duration: 3000,
					});
				});
			},
			hideModal() {
				// this.getPhone();
				// 隐藏模态框
				this.showModal = false;
			},
			selectDate(date) {
				// 处理日期选择事件，更新选中的日期
				this.selectedDate = date;
			},
			generateWeekDates() {
				const today = new Date();
				const startDay = today.getDate();
				for (let i = 0; i < 7; i++) {
					const date = new Date(today.getFullYear(), today.getMonth(), startDay + i);
					// 使用 yyyy-MM-dd 格式，这是iOS支持的格式之一
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					this.weekDates.push(`${date.getFullYear()}-${month}-${day}`);
				}
			},
			formatDate(date) {
				const day = new Date(date);
				const dayNum = String(day.getDate()).padStart(2, '0');
				return dayNum;
			},
			getDayName(date) {
				const day = new Date(date);
				const dayOfWeek = day.getDay();
				// 由于 JavaScript 中 getDay() 返回的星期天是 0，星期一是 1，我们需要对结果进行调整
				// 将 dayOfWeek 加 1 以匹配您的 weekDays 数组，该数组从星期一（1）开始
				return this.weekDays[dayOfWeek];
			},
			getDotClass(date) {
				const count = this.dataList.filter(item => item.dateTime && item.dateTime.startsWith(date)).length;
				if (count > 3) {
					return 'red-dot';
				} else if (count > 0) {
					return 'green-dot';
				}
				return '';
			}
		}
	};
</script>
<style scoped>
	.default-work-prompt {
		color: #999;
		font-size: 24rpx;
	}

	.selected-date {
		color: #007BFF;
		/* 选中时的字体颜色 */
		/* font-weight: bold; */
		/* 可选：加粗字体 */
	}

	.name-text {
		letter-spacing: 24rpx;
		margin-left: 8rpx;
	}

	.container {
		position: relative;
		/* 设为相对定位，作为绝对定位子元素的参考 */
	}

	.more-action {
		position: absolute;
		/* 设为绝对定位 */
		right: -630rpx;
		/* 距离右边的距离 */
		bottom: 8rpx;
		/* 距离底部的距离 */
		padding: 10rpx 20rpx;
		border-radius: 4rpx;
		font-size: 27rpx;
		text-align: center;
		/* 居中对齐文本 */
		color: #888;
		/* font-weight: 550; */
	}

	.picker-parent {
		padding: 1rpx;
		/* 调整这个值来改变内边距大小 */
	}

	.confirm-button {
		margin-top: -35rpx;
	}

	.required {
		color: red;
	}

	.input-group {
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		margin-left: 25rpx;
	}

	.layout-container {
		display: flex;
		flex-direction: column;
	}

	.name-input-group {
		display: flex;
		align-items: center;
		margin-bottom: 5rpx;
		margin-left: 21rpx;
		margin-top: -12rpx;
	}

	.phone-input-group {
		display: flex;
		align-items: center;
		margin-top: -38rpx;
		margin-left: 5rpx;
	}

	.input-item {
		margin-bottom: 10px;
		font-size: 30rpx;
		color: #666;
		flex: 1;
		/* border: 1px solid #ccc; */
		/* 根据需要调整边框样式 */
		border-radius: 4px;
		/* 根据需要调整圆角 */
		padding: 8px;
		/* 根据需要调整内边距 */
		outline: none;
		/* 移除聚焦时的轮廓 */
		width: 400rpx;
		margin-left: -35rpx;
	}

	.input-item-name {
		margin-bottom: 10px;
		font-size: 30rpx;
		color: #666;
		flex: 1;
		/* border: 1px solid #ccc; */
		/* 根据需要调整边框样式 */
		border-radius: 4px;
		/* 根据需要调整圆角 */
		padding: 8px;
		/* 根据需要调整内边距 */
		outline: none;
		/* 移除聚焦时的轮廓 */
		width: 400rpx;
		margin-left: -55rpx;
	}

	.name {
		margin-right: 8px;
		/* 根据需要调整间距 */
		white-space: nowrap;
		/* 防止标签换行 */
		margin-bottom: 10px;
		font-size: 30rpx;
		color: #666;
		padding: 5rpx;
		letter-spacing: 20rpx;
		margin-left: 10rpx;
	}

	.phone {
		margin-right: 8px;
		/* 根据需要调整间距 */
		white-space: nowrap;
		/* 防止标签换行 */
		margin-bottom: 10px;
		font-size: 30rpx;
		color: #666;
		padding: 5rpx;
		/* letter-spacing: 2rpx; */
		margin-left: 6rpx;
	}

	.in-progress-tip {
		margin-left: 10px;
		color: blue;
	}

	.modal {
		/* 模态框的定位和样式 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		/* 模态框内容的样式 */
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		width: 90%;
		max-width: 500px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.modal-header {
		/* 模态框头部的样式 */
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.modal-body {
		/* 模态框主体的样式 */
		margin-bottom: 20px;
	}

	.modal-footer {
		/* 模态框底部的样式 */
		display: flex;
		justify-content: flex-end;
	}

	.picker-item {
		/* 选择器项的样式 */
		margin-bottom: 10px;
		font-size: 30rpx;
		color: #666;
	}

	.uni-picker-tips {
		/* 选择器提示的样式 */
		font-size: 12px;
		color: #666;
		margin-bottom: 15px;
		padding: 0 15px;
	}

	.empty {
		/* 空状态容器的样式 */
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.empty-content {
		/* 空状态内容的样式 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.image-empty {
		/* 空状态图片的样式 */
		width: 400rpx;
		height: 500rpx;
		margin-bottom: 20rpx;
		margin-top: -30rpx;
	}

	.empty-text {
		/* 空状态文字的样式 */
		font-size: 25rpx;
		margin-top: -95rpx;
		color: #cdcdcd;
	}

	.image-style {
		/* 图标样式 */
		width: 55rpx;
		height: 55rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.image-style:first-child {
		margin-left: 0;
	}

	.data-list {
		/* 预约信息列表的样式 */
		margin-top: 20px;
	}

	.data-item {
		/* 预约信息项的样式 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.data-content {
		/* 预约信息内容容器的样式 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.data-label {
		display: flex;
		align-items: center;
		font-size: 27rpx;
		color: #888;
		margin-bottom: 5px;
		font-weight: blod;
	}

	.day {
		/* 单个日期项的样式 */
		flex: 1;
		text-align: center;
		cursor: pointer;
		margin: 0 10rpx;
		transition: background-color 0.3s ease;
		position: relative;
	}

	.week {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		border-radius: 10rpx;
		/* 可选，为视图添加圆角 */
		background-color: #ffffff;
		/* 可选，设置背景颜色 */
		height: 140rpx;
	}

	.day-item {
		flex: 1;
		/* 平分空间 */
		margin: 0 5rpx;
		/* 设置左右间距 */
		padding: 15rpx;
		/* 内边距 */
		text-align: center;
		/* 内容居中 */
		border: 2rpx solid transparent;
		/* 默认透明边框 */
		border-radius: 10rpx;
		/* 圆角 */
		transition: all 0.3s ease;
		/* 平滑过渡 */
		cursor: pointer;
		/* 光标变化 */
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	.day-name {
		/* font-weight: bold; */
		/* 加粗星期几 */
		font-size: 37rpx;
		/* 字体大小 */
	}

	.day-date {
		font-size: 32rpx;
		/* 日期字体大小 */
	}

	.is-selected {
		/* 选中日期的样式 */
		/* background-color: #E9ECEF; */
		/* color: white; */
		color: #007BFF;
		box-shadow: 0 2rpx 15rpx rgba(63, 81, 181, 0.3);
	}

	.red-dot,
	.green-dot {
		/* 预约状态圆点的样式 */
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.red-dot {
		background-color: red;
	}

	.green-dot {
		background-color: #1269db;
	}

	.title {
		/* 预约信息标题的样式 */
		font-size: 36rpx;
		margin-left: 25rpx;
		margin-top: 38rpx;
		color: #0056b3;
	}

	.add-button {
		/* 加号按钮的样式 */
		 background-size: cover;
		background-image: url('/static/icon/添加 (1).png');
		position: absolute;
		top: 200rpx;
		right: 30rpx;
		width: 75rpx;
		height: 75rpx;
		cursor: pointer;
		border: none;
	}

	.modal-footer button {
		/* 模态框底部按钮的样式 */
		border: none;
		border-radius: 5px;
		cursor: pointer;
		outline: none;
		font-size: 35rpx;
		color: #fff;
		width: 800rpx;
	}

	.modal-footer button:last-child {
		background-color: #1269db;
	}

	/* 	.selected-font-color {
		color: #1269db;
	} */
	/* 弹出框文字 */
	.AlertText {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 弹出框 */
	.LoginAlert {
		width: 95%;
		height: 200rpx;
		text-align: center;
		font-size: 30rpx;
	}
</style>